<template>
  <div class="page-container">
    <!-- 主要内容 -->
    <div class="main-content">
      <!-- 欢迎信息 -->
      <el-card style="margin-bottom: 20px;" shadow="hover">
        <template #header>
          <div style="display: flex; align-items: center; justify-content: space-between;">
            <span style="font-size: 18px; font-weight: 600;">
              欢迎回来，{{ authStore.user?.username }}！
            </span>
            <el-tag :type="getRoleTagType(authStore.user?.role)">
              {{ PermissionUtils.getRoleDisplayName(authStore.user?.role || '') }}
            </el-tag>
          </div>
        </template>
        <el-text type="info">
          您当前以 {{ PermissionUtils.getRoleDisplayName(authStore.user?.role || '') }} 身份登录。
        </el-text>
      </el-card>

      <!-- 统计卡片 -->
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <!-- 用户状态卡片 -->
        <el-col :xs="24" :sm="8">
          <el-card shadow="hover">
            <el-statistic
              title="Account Status"
              :value="authStore.user?.isActive ? 'Active' : 'Inactive'"
              :value-style="{ color: authStore.user?.isActive ? '#67C23A' : '#F56C6C' }"
            >
              <template #prefix>
                <el-icon style="vertical-align: -0.125em">
                  <User />
                </el-icon>
              </template>
            </el-statistic>
          </el-card>
        </el-col>

        <!-- 角色信息卡片 -->
        <el-col :xs="24" :sm="8">
          <el-card shadow="hover">
            <el-statistic
              title="Role"
              :value="authStore.user?.role || 'Unknown'"
            >
              <template #prefix>
                <el-icon style="vertical-align: -0.125em">
                  <Avatar />
                </el-icon>
              </template>
            </el-statistic>
          </el-card>
        </el-col>

        <!-- 最后登录时间卡片 -->
        <el-col :xs="24" :sm="8">
          <el-card shadow="hover">
            <el-statistic
              title="Last Login"
              :value="formatDate(authStore.user?.lastLoginAt)"
            >
              <template #prefix>
                <el-icon style="vertical-align: -0.125em">
                  <Clock />
                </el-icon>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
      </el-row>

      <!-- 管理员面板 -->
      <div v-if="PermissionUtils.hasAdminAccess(authStore.user)">
        <AdminDashboard />
      </div>

      <!-- 用户功能区域 -->
      <div v-else>
        <el-card shadow="hover">
          <template #header>
            <span style="font-size: 16px; font-weight: 600;">Quick Actions</span>
          </template>
          
          <el-row :gutter="20">
            <!-- 个人信息卡片 -->
            <el-col :xs="24" :sm="12" :lg="8">
              <el-card shadow="hover" style="margin-bottom: 20px; cursor: pointer;" @click="$router.push('/profile')">
                <template #header>
                  <div style="display: flex; align-items: center;">
                    <el-icon style="margin-right: 8px; color: #409EFF;">
                      <User />
                    </el-icon>
                    <span>Profile</span>
                  </div>
                </template>
                <div style="padding: 20px 0;">
                  <el-text size="large" style="display: block; margin-bottom: 8px;">
                    {{ authStore.user?.username }}
                  </el-text>
                  <el-text type="info">
                    Manage your profile information
                  </el-text>
                </div>
              </el-card>
            </el-col>

            <!-- 订单管理卡片 -->
            <el-col :xs="24" :sm="12" :lg="8">
              <el-card shadow="hover" style="margin-bottom: 20px; cursor: pointer;" @click="$router.push('/orders')">
                <template #header>
                  <div style="display: flex; align-items: center;">
                    <el-icon style="margin-right: 8px; color: #67C23A;">
                      <Document />
                    </el-icon>
                    <span>Orders</span>
                  </div>
                </template>
                <div style="padding: 20px 0;">
                  <el-text size="large" style="display: block; margin-bottom: 8px;">
                    Manage Orders
                  </el-text>
                  <el-text type="info">
                    View and manage your orders
                  </el-text>
                </div>
              </el-card>
            </el-col>

            <!-- 设置卡片 -->
            <el-col :xs="24" :sm="12" :lg="8">
              <el-card shadow="hover" style="margin-bottom: 20px; cursor: pointer;" @click="$router.push('/settings')">
                <template #header>
                  <div style="display: flex; align-items: center;">
                    <el-icon style="margin-right: 8px; color: #E6A23C;">
                      <Setting />
                    </el-icon>
                    <span>Settings</span>
                  </div>
                </template>
                <div style="padding: 20px 0;">
                  <el-text size="large" style="display: block; margin-bottom: 8px;">
                    Account Settings
                  </el-text>
                  <el-text type="info">
                    Configure your account preferences
                  </el-text>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from '../stores/auth'
import { PermissionUtils } from '../utils/permissions'
import { User, Avatar, Clock, Document, Setting } from '@element-plus/icons-vue'
import AdminDashboard from '../components/AdminDashboard.vue'

// Store
const authStore = useAuthStore()

// 获取角色标签类型
function getRoleTagType(role: string | undefined) {
  switch (role?.toLowerCase()) {
    case 'admin':
      return 'danger'
    case 'sub_admin':
      return 'warning'
    case 'user':
      return 'success'
    default:
      return 'info'
  }
}

// 格式化日期
function formatDate(date: string | Date | undefined) {
  if (!date) return 'Never'
  
  const d = new Date(date)
  if (isNaN(d.getTime())) return 'Invalid Date'
  
  return d.toLocaleDateString() + ' ' + d.toLocaleTimeString()
}
</script>

<style scoped>
.el-card {
  transition: all 0.3s ease;
}

.el-card:hover {
  transform: translateY(-2px);
}
</style>
